<template>
    <view>
        <view class="foods_scroll">
            <scroll-view scroll-x="true" class="foods_scroll_all flex">
                <block v-for="(item, index) in dataList" :key="index">
                    <view
                        class="foods_cla"
                        @click="tiao(item.id, item.category.pid, item.shop.mobile)"
                    >
                        <view
                            :class="
                                index % 3 == 2
                                    ? 'foods_cla_item3'
                                    : index % 3 == 1
                                    ? 'foods_cla_item2'
                                    : 'foods_cla_item1'
                            "
                        >
                            <image
                                class="foods_cla_item_img"
                                :src="BaseUrl + item.image"
                                mode=""
                            ></image>
                            <view class="foods_cla_item_title">
                                {{ item.title.slice(0, 6) }}{{ item.title.length > 5 ? "..." : "" }}
                            </view>
                            <view class="foods_cla_item_price">
                                <text class="goods_money">¥</text>{{ item.price }}
                            </view>
                            <view class="foods_cla_item_vipPrice">
                                <text class="goods_money">会员价</text>¥{{
                                    item.sku[0].vip_price ? item.sku[0].vip_price : item.price
                                }}
                            </view>
                            <view class="foods_cla_item_integral">
                                <text class="goods_money">购物获得积分</text
                                >{{ item.sku[0].send_score ? item.sku[0].send_score : "0.00" }}
                            </view>
                        </view>
                    </view>
                </block>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { imageURL } from "@/utils/config";
import { BaseUrl } from "../../utils/req.js";
import { getPlayGoodsList } from "@/utils/play";
export default {
    name: "foodsList",
    props: {
        dataList: {
            type: Array,
            default: [],
        },
        cateId: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            imageURL,
            BaseUrl,
            category_index: 0,
        };
    },
    methods: {
        tiao(id, pid, mobile) {
            if ([11, 14].includes(pid)) {
                uni.navigateTo({
                    url: `/dabai/pages/caterDetails/caterDetails?id=${id}&pid=${pid}&mobile=${mobile}`,
                });
            } else {
                uni.navigateTo({
                    url: `/pages/product/goods?id=${id}`,
                });
            }
        },
    },
    onLoad() {},
};
</script>

<style lang="scss">
.foods_scroll {
    width: 100%;
    height: 400rpx;
    overflow: hidden;
    background: #fff;

    .foods_scroll_all {
        width: 100%;
        height: 400rpx;
        white-space: nowrap;

        .foods_cla {
            display: inline-block;
            margin-left: 11rpx;
            width: 218rpx;
            height: 400rpx;
            border-radius: 16rpx;
            .foods_cla_item1 {
                width: 100%;
                height: 100%;
                background: #faf3f6;
                border-radius: 16rpx;
            }
            .foods_cla_item2 {
                width: 100%;
                height: 100%;
                background: #eff6fa;
                border-radius: 16rpx;
            }
            .foods_cla_item3 {
                width: 100%;
                height: 100%;
                background: #f2fce6;
                border-radius: 16rpx;
            }
            .foods_cla_item_img {
                width: 196rpx;
                height: 196rpx;
                border-radius: 16rpx;
                margin-left: 11rpx;
                padding-top: 10rpx;
            }
            .foods_cla_item_title {
                width: 196rpx;
                margin-left: 8rpx;
                height: 48rpx;
                line-height: 48rpx;
                font-size: 26rpx;
            }
            .foods_cla_item_price {
                width: 196rpx;
                margin-left: 8rpx;
                height: 48rpx;
                font-weight: bold;
                color: #eb5c20;
                line-height: 48rpx;
                font-size: 26rpx;
            }
            .foods_cla_item_vipPrice {
                width: 196rpx;
                margin-left: 8rpx;
                height: 45rpx;
                line-height: 45rpx;
                font-weight: 300;
                font-size: 22rpx;
                color: #eb5c20;
            }
            .foods_cla_item_integral {
                width: 196rpx;
                margin-left: 8rpx;
                height: 45rpx;
                line-height: 45rpx;
                font-weight: 300;
                font-size: 24rpx;
                color: #999999;
            }
        }
    }
    .goods_money {
        margin-right: 5rpx;
    }
}
</style>
